/*静态定位*/
#div1 {
    width:20em;
    height: 10em;
    border:black solid 1px;
    background-color: red ;
}

/*相对固定*/
#div2 {
    width:20em;
    height: 10em;
    border:lawngreen dashed  1px;
    background-color: black;
    position: relative;
    left: 1em;
    top: 1em;
}

/*绝对定位*/
#div3 {
    width:20em;
    height: 10em;
    bordr:blueviolet dot-dash 1px;
    background-color: blue;
    position: absolute;
    left: 1em;
    top: 1em;
}

.fixed-side {
    width:20em;
    height: 10em;
    bordr:brown double 1px;
    background-color: bisque;
    position: fixed;
    left: 30em;
    top: 10em;
}

.one,.two ,.three  {
    width: 1em;
    height: 30em;
    border: black solid 1px;
    margin-bottom: 10em;
    overflow: hidden;
    /*overflow: scroll;*/
    float: left;
}

.clf{
    clear: both;
}
.four {
    float: left;
    width: 30em;
    height: 2em;
    border: black solid 1px;
    background-color: crimson;
    margin-bottom: 3em;
}